<!--
 * @Descripttion: 学生选课列表
 * @version: 
 * @Author: hzx
 * @Date: 2021-03-26 21:18:19
 * @LastEditors: hzx
 * @LastEditTime: 2021-03-27 21:19:10
-->
<template>
    <template v-if="state.courseData.length > 0">
        <h2>可选课程</h2>
        <a-row :gutter="16">
            <template v-for="item in state.courseData" :key="item.sc_id">
                <a-col :span="8">
                    <a-card :title="item.course_name" style="width: 300px">
                        <p>任课老师: {{ item.t_name }}</p>
                        <p>课程简介: 这门课程主要修xxxxxx</p>
                        <a-button type="primary" @click="clickCheck(item.tc_id)"
                            >选择</a-button
                        >
                    </a-card>
                </a-col>
            </template>
        </a-row>
    </template>
    <template v-if="state.checkData.length > 0">
        <h2>已选课程</h2>
        <a-table
            :rowKey="(record) => record.stu_id"
            :columns="columns"
            :data-source="state.checkData"
            bordered
        ></a-table>
    </template>
</template>

<script>
import { checkCourse, insertCourse, selStuView } from "@/api/course";
import { reactive, onMounted, defineComponent } from "vue";
import { useStore } from "vuex";
const columns = [
    {
        title: "班级",
        dataIndex: "class_name",
        key: "class",
    },
    {
        title: "姓名",
        dataIndex: "stu_name",
        key: "name",
    },
    {
        title: "科目",
        dataIndex: "course_name",
        key: "course_name",
        ellipsis: true,
    },
    {
        title: "授课老师",
        dataIndex: "t_name",
        key: "t_name",
        ellipsis: true,
    },
];
export default defineComponent({
    setup() {
        let state = reactive({
            courseData: [],
            checkData: [],
        });

        const store = useStore();
        //获取未选取课程列表
        onMounted(async () => {
            state.courseData = await checkCourse(store.state.resourceId.stu_id);
            //console.log(state.courseData);
            state.checkData = await selStuView(store.state.resourceId.stu_id);
            //console.log(state.checkData);
        });

        //选择课程
        async function clickCheck(tc_id) {
            let data = {
                tc_id: tc_id,
                stu_id: store.state.resourceId.stu_id,
            };
            await insertCourse(data);
            //刷新视图
            state.courseData = await checkCourse(store.state.resourceId.stu_id);
            state.checkData = await selStuView(store.state.resourceId.stu_id);
        }

        return {
            state,
            //选择课程
            clickCheck,
            //表投
            columns,
        };
    },
});
</script>

<style lang="less" scoped>
.ant-col-8 {
    margin-bottom: 20px;
}
</style>